<template>
  <div id="app">
    <!-- 
      tag：将router-link渲染成指定的标签
      to: 切换路由到哪里，里面值是路由的path属性
     -->
    <router-link to="/detail" tag="button">详情</router-link>
    <router-link v-bind:to="'/review/' + abc" tag="button">评论</router-link>
    <router-link to="/answer" tag="a">问答</router-link>
    <router-link to="/service" tag="button">售后</router-link>
    <br />
    <hr />
    <!-- 通过代码进行路由切换 -->
    <button @click="changeroute('/detail')">详情（代码切换）</button>
    <button @click="changeroute('/review')">评论（代码切换）</button>
    <button @click="changeroute('/answer')">问答（代码切换）</button>

    <button @click="changeroute('/service')">售后（代码切换）</button>
    <hr>
    <!-- 路由的名字进行且切换： 命名路由 -->
    <router-link v-bind:to="{name:'Detail'}"  tag="button">详情（命名路由）</router-link>
<router-link v-bind:to="{name:'Service'}"  tag="button">售后（命名路由）</router-link>
  <hr>
   <!-- 动态路由也可以通过名字路由 params:{goodsid:1002}} 携带参数  -->
   <router-link :to="{name:'Detail',params:{goodsid:1002}}"  tag="button">详情（带参数）</router-link>
   
    <!-- 用来展示当前路由对应的组件 -->
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    changeroute: function (url) {
      //利用代码实现路由的切换
      this.$router.push(url);
      //利用代码实现路由切换常用在根据ajax请求的结果跳转页面、页面切换
    },
  },
  data() {
    return{
      abc:10001,
    }
  },
};
</script>

<style>
/* 设置被选中标签的属性
    活跃状态 */
.router-link-active {
  background-color: hotpink;
  color: green;
}
</style>
